import React,{useState,useEffect} from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
type InsertFnType = (url: string, alt: string, href: string) => void
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

 

const App: React.FC<any> = ()=>{

 
    console.log(9999999,import.meta.env.VITE_BASE_URL+'api/upload/add');
    


    const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
    const [html, setHtml] = useState('')

   
            // 工具栏配置
    const toolbarConfig: Partial<IToolbarConfig> = { }  // TS 语法
    // const toolbarConfig = { }                        // JS 语法

    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {    // TS 语法
    // const editorConfig = {                         // JS 语法
        placeholder: '请输入内容...',
        
        MENU_CONF:{
            uploadImage:{
                fieldName: 'file',
                headers: {
                    Authorization:sessionStorage.getItem("token")
                },
                server: import.meta.env.VITE_BASE_URL+'api/upload/add',
                customInsert(file: any, insertFn: InsertFnType) {  // TS 语法
                    // async customUpload(file, insertFn) {                   // JS 语法
                        // file 即选中的文件
                        // 自己实现上传，并得到图片 url alt href
                        // 最后插入图片
                        insertFn(import.meta.env.VITE_BASE_IMG_URL+file.data,"","")
                        console.log(99,file);
                        
                    }

            }
            // 自定义上传
           
        }
    }

    

  
    

    const  editorChange=(e:any)=>{

        

        setHtml(e.getHtml());
        

    }

    useEffect(()=>{

        setTimeout(() => {
            setHtml('adadaadadda')
        }, 500)

      

    },[])

    
        // 及时销毁 editor ，重要！
        useEffect(() => {
            return () => {
                if (editor == null) return
                editor.destroy()
                setEditor(null)
            }
        }, [editor])


    return (
        
  <Form
  name="basic"
  labelCol={{ span: 8 }}
  wrapperCol={{ span: 16 }}
  style={{ maxWidth: 600 }}
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  autoComplete="off"
>
  <Form.Item<any>
    label="标题"
    name="title"
    rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input />
  </Form.Item>

  <Form.Item<any>
    label="内容"
  >
  <div style={{ border: '1px solid #ccc', zIndex: 100}}>
   <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editorChange}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
   </div>
  </Form.Item>
  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit">
      添加
    </Button>
  </Form.Item>
</Form>
    )

}

export default App;